<template>
    <div class="sendCode">
        <p>手机验证码已发送到 <br>
            {{tel}}
        </p>
        <div class="code flex-between">
            <input type="number" v-model="code" >
            <div :class="{'active':code.charAt(0)}">{{code.charAt(0)}}</div>
            <div :class="{'active':code.charAt(1)}">{{code.charAt(1)}}</div>
            <div :class="{'active':code.charAt(2) }">{{code.charAt(2)}}</div>
            <div :class="{'active':code.charAt(3) }">{{code.charAt(3)}}</div>
<!--            <div :class="{'active':code.charAt(4) }">{{code.charAt(4)}}</div>-->
        </div>
        <button @click="next">下一步</button>
    </div>
</template>

<script>
    export default {
        name: "sendCode",
        data(){
            return {
                tel:"",
                code:"",
            }
        },
        mounted() {
            this.tel = this.$route.query.tel;
            this.sendCode()
        },
        methods:{
            sendCode(){
                this.$http.post('sms/send',{
                    event:"vermobile",
                    mobile:this.tel,
                }).then(res=>{
                    this.$toast(res.msg)
                })
            },
            next(){
                if(!this.code){
                    this.$toast('验证码不能为空');
                    return
                }
                this.$http.post("user/changemobile",{
                    mobile:this.tel,
                    captcha:this.code
                }).then(res=>{
                    if(res.code == 1){
                        this.$router.push({
                            path:"/modifyTel"
                        })
                    }else{
                        this.$toast(res.msg);
                    }
                })

            }
        },
        watch:{
            code:function (newVal) {
                if(newVal.length<=4){
                    console.log(newVal)
                    return newVal
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .sendCode{
        position: absolute;
        top:88px;
        width: 100%;
        z-index: 10;
        padding: 70px;
        background: white;
        min-height: calc(100vh - 90px);
        box-sizing: border-box;
        p{
            font-size: 50px;
            line-height: 75px;
            color: #333333;
            margin-top: 30px;
        }
        .code{
            position: relative;
            height: 80px;
            margin: 150px 0 100px;
            input{
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            div{
                width: 80px;
                height: 80px;
                border-bottom: 2px solid #aaa;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 40px;
            }
            .active{
                border-color: #185fff;
            }
        }
        button{
            width: 610px;
            height: 88px;
            background-color: #185fff;
            box-shadow: 0px 10px 30px 0px
            rgba(24, 95, 255, 0.3);
            border-radius: 44px;
            font-size: 32px;
            color: #ffffff;
            border: 0;
            outline: none;
        }
    }
</style>
